<script>
import { reactive } from "vue";
import { public_status } from "../store/public_status";
import { getShopData, getShopData_index } from "../api/index";
import { useStore } from "../store/index";
import { Toast } from "vant";
export default {
  setup() {
    let data = reactive({
      tabsIndex: 0, // % 主页tabs下标切换

      shopData: null, // # 商品数据
    });

    let car_isShow = public_status();
    car_isShow.display = true; // # 显示底部导航
    car_isShow._isShow = true; // # 显示底部导航

    // # 用户数据
    let userId = localStorage.getItem("P4_userId");
    let userData = useStore().userData[userId];

    // # 获取数据
    getShopData()
      .then((vl) => {
        data.shopData = vl.listData;
        console.log(vl);
      })
      .catch(() => {
        getShopData_index().then((vl) => {
          data.shopData = vl.listData;
        });
      });

    // # 收藏功能
    let collect = (id) => {
      let index = userData.Favorites.findIndex((item) => item.id == id);
      let shop_index = data.shopData.findIndex((item) => item.id == id);
      if (index == -1) {
        userData.Favorites.push(data.shopData[shop_index]);
        Toast({
          message: "收藏成功",
          position: "bottom",
        });
      } else {
        userData.Favorites.splice(index, 1);
        Toast({
          message: "取消收藏",
          position: "bottom",
        });
      }
    };

    // # 判断是否有收藏
    let isFavorites = (id) => {
      let index = userData.Favorites.findIndex((item) => item.id == id);
      if (index == -1) {
        return false;
      } else {
        return true;
      }
    };

    return {
      data,
      car_isShow,

      collect,
      isFavorites,
    };
  },
};
</script>

<template>
  <div class="homeView">
    <!-- 头部 -->
    <header class="header">
      <div class="left" @click="data.tabsIndex = 1">
        <div class="address">
          <i class="iconfont icon-fuwumendian"></i>
          <span class="text">最近的门店</span>
        </div>
        <div class="distance">距离您1km</div>
      </div>
      <div class="right">
        <div class="iconfont icon-saoyisao"></div>
      </div>
    </header>
    <!-- 头部 -->

    <!-- 标题 -->
    <div class="title">Csndice</div>
    <!-- 标题 -->

    <!-- 搜索框 -->
    <div class="search_box">
      <router-link to="/search" class="content">
        <div class="iconfont icon-fangdajing1"></div>
        <div class="text">搜索</div>
      </router-link>
    </div>
    <!-- 搜索框 -->

    <!-- tabs选项 -->
    <div class="tabs">
      <div class="content">
        <div
          :class="['item', { con: data.tabsIndex == 0 }]"
          @click="data.tabsIndex = 0"
        >
          <div
            class="iconfont icon-fushi-yundongxie"
            v-show="data.tabsIndex == 0"
          ></div>
          <div class="iconfont icon-xie" v-show="data.tabsIndex == 1"></div>
          <div class="text">好物推荐</div>
        </div>
        <div
          :class="['item', { con: data.tabsIndex == 1 }]"
          @click="data.tabsIndex = 1"
        >
          <div class="iconfont icon-mendian1"></div>
          <div class="text">附近店铺</div>
        </div>
        <div :class="['mask', { right: data.tabsIndex == 1 }]"></div>
      </div>
    </div>
    <!-- tabs选项 -->

    <!-- 主体内容 商品 -->
    <div class="shop_list">
      <div class="item" v-for="item in data.shopData" :key="item.id">
        <router-link :to="'/details?id=' + item.id" class="img">
          <img :src="item.imgUrl" alt="" />
          <div class="img_tab">
            <img
              v-for="(vl, i) in item.details.type[0].banner"
              :key="i"
              :src="vl"
              alt=""
            />
          </div>
        </router-link>
        <div class="name txt-cut">{{ item.title }}</div>
        <div class="price">
          ￥ <span>{{ item.price }} </span>
          <i class="oldPrice">￥{{ item.price + 20 }} </i>
        </div>
        <div
          :class="['add_collect', { add: isFavorites(item.id) }]"
          @click="collect(item.id)"
        >
          <i class="iconfont icon-jiahao"></i>
        </div>
      </div>
      <!-- 分割线 -->
      <van-divider dashed :style="{ color: '', borderColor: '#333' }">
        我可是有底线的
      </van-divider>
      <!-- 分割线 -->
    </div>
    <!-- 主体内容 商品 -->

    <!-- 购物车 -->
    <div :class="['shop_car', { down: !car_isShow._isShow }]" v-show="false">
      <div class="content">
        <div class="shop_box">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>

        <div class="btn">
          <i class="iconfont icon-gouwuche"></i>
          <span>￥599</span>
        </div>
      </div>
    </div>
    <!-- 购物车 -->
  </div>
</template>

<style lang="scss" scoped>
.homeView {
  min-height: 100%;

  // todo 头部
  header.header {
    position: sticky;
    top: 0;
    z-index: 100;

    background: #fff;
    height: 60px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      > .address {
        font-size: 14px;
        line-height: 14px;

        > .text {
          margin-left: 5px;
          font-weight: bold;
        }
      }

      > .distance {
        font-size: 10px;
        color: #ccc;
        margin-left: 20px;
        margin-top: 5px;
      }
    }

    .right {
      margin-right: 5px;
      margin-top: -5px;
      background: #f8f8f8;
      padding: 5px;
      border-radius: 100%;

      > .iconfont {
        font-size: 20px;
      }
    }
  }

  // todo 标题
  > .title {
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 18px;
  }

  // todo 搜索框
  .search_box {
    padding: 0 15px;

    > .content {
      height: 42px;
      border-radius: 21px;
      background: #f8f8f8;
      color: #c0c0c0;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;

      > .text {
        margin-left: 5px;
      }
    }
  }

  // todo tabs选项卡
  .tabs {
    padding: 20px 15px;
    position: sticky;
    top: 50px;
    z-index: 100;
    background: #fff;

    > .content {
      position: relative;
      display: flex;
      background: #f8f8f8;
      height: 44px;
      border-radius: 12px;

      > .item {
        position: relative;
        z-index: 10;

        height: 100%;
        width: 50%;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;

        > .text {
          margin-left: 8px;
        }

        &.con {
          color: #fff;
        }
      }

      > .mask {
        position: absolute;
        left: 0;
        width: 50%;
        height: 100%;
        border-radius: 12px;
        background: #222;
        transition: all 0.2s;

        &.right {
          left: 50%;
        }
      }
    }
  }

  // todo 主体内容
  .shop_list {
    padding: 0 15px 5px;

    > .item {
      position: relative;
      display: block;

      width: 100%;
      box-sizing: border-box;

      overflow: hidden;

      margin-bottom: 20px;
      padding: 0 0 20px;
      border-radius: 10px;
      color: #333;
      box-shadow: 1px 3px 5px 5px rgba($color: #f0f0f0, $alpha: 0.7);

      > .img {
        width: 100%;
        display: flex;

        > img {
          width: 82%;
          flex: 1;
        }

        > .img_tab {
          height: 100%;
          flex: 1;

          > img {
            width: 100%;
          }
        }
      }

      > .name {
        margin-top: 10px;
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 1px;
        font-weight: bold;
        padding: 0 15px;
      }

      > .tips {
        color: #f0f0f0;
        margin-bottom: 22px;
        padding: 0 15px;
      }

      > .price {
        padding: 0 15px;
        margin-top: 10px;

        > span {
          font-size: 20px;
        }

        > .oldPrice {
          color: #666;
          text-decoration: line-through;
        }
      }

      > .add_collect {
        position: absolute;
        bottom: 14px;
        right: 16px;

        color: #f0f0f0;
        background: rgba($color: #333, $alpha: 0.5);

        border-radius: 100%;
        padding: 5px;

        transition: all 0.5s;

        > i {
          font-size: 22px;
        }

        &:active {
          transform: scale(1.1);
        }

        &.add {
          transform: rotate(45deg);
          background: #f0f0f0;
          color: #333;
        }
      }
    }
  }

  // todo 购物车
  > .shop_car {
    width: 100%;
    max-width: 750px;
    height: 50px;

    box-sizing: border-box;
    position: fixed;
    bottom: 100px;
    padding: 0 15px;

    transition: bottom 0.3s;

    &.down {
      bottom: 22px;
    }

    > .content {
      position: relative;
      width: 100%;
      height: 100%;

      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;

      box-sizing: border-box;
      border-radius: 12px;
      border: 1px solid #ccc;
      background: #fff;

      > .shop_box {
        position: relative;

        > .item {
          width: 36px;
          height: 36px;
          border: 1px solid #fff;
          border-radius: 100%;

          position: absolute;
          left: 0px;
          top: 0;
          bottom: 0;
          margin: auto;

          background: teal;
        }
      }

      > .btn {
        justify-self: flex-end;
        padding: 10px 15px;
        font-size: 12px;
        line-height: 12px;
        text-align: center;

        border-radius: 8px;
        background: #222;

        color: #ccc;
        > i {
          margin-right: 5px;
        }

        > span {
          display: inline-block;
        }
      }
    }
  }
}
</style>